import { PageHeader } from "@/components/page-header";
import { Button, SearchBar } from "@/components/base";
import { useNavigate } from "react-router-dom";
import { PlusOutlined } from "@ant-design/icons";
import { PageController } from '../../page-controller';
import React from 'react';
import * as pages from '@/pages';
import { Controller } from '@/views/basic-layout/controller'

/** 头部 */
export function Header() {
    const navigate = useNavigate();
    const pageController = React.useContext(PageController.Context);
    const controller = React.useContext(Controller.Context);

    return (
        <PageHeader
            title="服务项目"
            onBack={() => navigate(-1)}
            footer={<SearchBar placeholder='搜索服务名称、编号或描述' showCancelButton onSearch={pageController.setKeyword} />}
            extra={
                <Button
                    color='primary'
                    size='small'
                    fill='none'
                    onClick={() => {
                        controller.removeTab(pages.servicesDetailForm.name);
                        navigate(`/${pages.servicesDetailForm.name}`)
                    }}
                >
                    <PlusOutlined />
                    <span>新增服务</span>
                </Button>
            }
        />
    )
} 